<template>
  <img :src="realImgSrc" alt="whatever" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

/* 定义组件的props */
interface LazyImgProps {
  src: string;
  defaultImg: string;
}

const { src, defaultImg } = defineProps<LazyImgProps>();

const realImgSrc = ref(defaultImg);

const proxyImg = new Image();

/* 组件挂载时使用一个代理Image对象去加载src */
onMounted(() => {
  proxyImg.src = src;
  proxyImg.addEventListener("load", () => {
    realImgSrc.value = src;
  });
});
</script>

<style scoped></style>
